<template>
  <div class="box_bg">
    <!-- 内容区域  开始 -->
    <div class="components_con">
      <!-- 查询开始 -->
      <div class="components_searchs" @keyup.enter="queryTable">
        <span class="tit">名称：</span>
        <el-input v-model="table.queryParams.name" auto-complete="off" placeholder="请输入名称"></el-input>

        <span class="tit">负责人：</span>
        <el-input v-model="table.queryParams.leaderName" auto-complete="off" placeholder="请输入负责人"></el-input>

        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- components_btns -->
    <div class="components_btns clearfix">
      <div class="fl">
        <el-button type="primary" size="mini" v-has="'professionGroup:add'" icon="el-icon-plus" @click="showDialog">添加专业组</el-button>
      </div>
    </div>
    <!-- components_btns -->
    <div class="scrollBarX">
      <vue-table
        :api-url="table.apiUrl"
        :fields="table.fields"
        :appendParams="table.queryParams"
        :content="self"
        ref="professionGroupTable">
      </vue-table>
    </div>
    <profession-group-edit ref="professionGroupEdit"></profession-group-edit>
    <profession-group-detail ref="professionGroupDetail"></profession-group-detail>
  </div>
</template>

<script>
  import {config} from '@/config'
  import professionGroupEdit from './profession-group-edit'
  import professionGroupDetail from './profession-group-detail'

  export default {
    components: {
      professionGroupEdit,
      professionGroupDetail
    },
    data() {
      return {
        self: this,
        table: {
          apiUrl: api.professionGroup.queryList,
          queryParams: {
            name: null,   //专业组名
            leaderName: null,   //负责人名称
          },
          fields: [
            {
              prop: "__index",
              label: "序号",
            },
            {
              prop: "name",
              label: "专业组名",
            },
            {
              prop: "leaderName",
              label: "专业负责人",
            },
            {
              prop: "updateUserName",
              label: "信息更新人",
            },
            {
              prop: "updateTime",
              label: "信息更新时间",
            },
            {
              prop: "remark",
              label: "备注",
            },
            {
              prop: "__action",
              label: "操作",
              width: '180',
              actions: [{
                label: "编辑",
                type: "edit",
                auth: "professionGroup:modify",
                func: function (vm, row) {
                  vm.$refs.professionGroupEdit.showDialog(row.id);
                }
              },
                {
                  label: "详情",
                  type: "detail",
                  auth: "professionGroup:view",
                  func: function (vm, row) {
                    vm.$refs.professionGroupDetail.showDialog(row.id);
                  }
                },
                {
                  label: "删除",
                  type: "delete",
                  auth: "professionGroup:delete",
                  func: function (vm, row) {
                    vm.deleteById(row.id);
                  }
                },
              ]
            },
          ],
        },
      };
    },
    created() {
    },
    mounted() {
    },
    computed: {},
    watch: {},
    methods: {


      // 根据id删除
      deleteById(id) {
        let vm = this;
        vm.$confirm('是否删除该条记录！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.axios.delete(api.professionGroup.delete.replace("{id}", id))
            .then((response) => {
              if (response.data.success) {
                vm.$message({
                  message: response.data.msg,
                  type: 'success',
                });
                vm.$refs.professionGroupTable.$emit('vuetable:current-refresh')
              } else {
                vm.$message.error(response.data.msg);
              }
            })
        }, () => {
        })
      },

      // 打开新增培养方案dialog
      showDialog() {
        this.$refs.professionGroupEdit.showDialog();
      },
      // 查询按钮
      queryTable() {
        this.$refs.professionGroupTable.$emit('vuetable:refresh')
      },
      // 重置
      reset() {
        for (let key in this.table.queryParams) {
          this.table.queryParams[key] = null;
        }
        this.$refs.professionGroupTable.$emit('vuetable:refresh')
      },
    },
  };
</script>
<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
</style>


